<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in statistics" :key="index">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: item.color }">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ item.value }}</div>
              <div class="stat-label">{{ item.label }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-4">
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">本年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div ref="chartRef" style="height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>线索来源分布</span>
            </div>
          </template>
          <div ref="pieChartRef" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-4">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最新线索</span>
              <el-button link>查看更多</el-button>
            </div>
          </template>
          <el-table :data="latestLeads" style="width: 100%">
            <el-table-column prop="source" label="来源" width="100" />
            <el-table-column prop="phone" label="电话" width="120" />
            <el-table-column prop="wechat" label="微信" width="120" />
            <el-table-column prop="location" label="居住地" />
            <el-table-column prop="time" label="时间" width="180" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>销售排名</span>
              <el-button link>查看更多</el-button>
            </div>
          </template>
          <el-table :data="salesRanking" style="width: 100%">
            <el-table-column type="index" label="排名" width="60" />
            <el-table-column prop="name" label="销售" width="120" />
            <el-table-column prop="leads" label="线索量" width="100" />
            <el-table-column prop="visit" label="到店" width="100" />
            <el-table-column prop="deal" label="成交" width="100" />
            <el-table-column prop="rate" label="成交率" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 查看更多对话框 -->
    <el-dialog
      title="查看更多"
      v-model="moreDialogVisible"
      width="800px"
      class="more-dialog"
    >
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待分发线索" name="pending">
          <el-table :data="pendingLeads" style="width: 100%" height="400">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="source" label="来源" width="100">
              <template #default="{ row }">
                <el-tag :type="getSourceType(row.source)">
                  {{ row.source }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="account" label="账号" width="120" />
            <el-table-column prop="phone" label="电话" width="120" />
            <el-table-column prop="type" label="咨询类型" width="100">
              <template #default="{ row }">
                <el-tag :type="getTypeTag(row.type)">
                  {{ row.type }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleDistribute(row)">分发</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待跟进客户" name="follow">
          <el-table :data="followCustomers" style="width: 100%" height="400">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="nickname" label="客户昵称" width="120" />
            <el-table-column prop="phone" label="电话" width="120" />
            <el-table-column prop="type" label="客户类型" width="100">
              <template #default="{ row }">
                <el-tag :type="getTypeTag(row.type)">
                  {{ row.type }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="sales" label="销售人员" width="120" />
            <el-table-column prop="lastContact" label="最后联系" width="180" />
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleFollow(row)">跟进</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待审核订单" name="audit">
          <el-table :data="auditOrders" style="width: 100%" height="400">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="orderNo" label="订单号" width="180" />
            <el-table-column prop="customer" label="客户" width="120" />
            <el-table-column prop="amount" label="金额" width="120" />
            <el-table-column prop="type" label="类型" width="100">
              <template #default="{ row }">
                <el-tag :type="getTypeTag(row.type)">
                  {{ row.type }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleAudit(row)">审核</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'

const timeRange = ref('week')
const chartRef = ref(null)
const pieChartRef = ref(null)
const moreDialogVisible = ref(false)
const activeTab = ref('pending')

const statistics = [
  { label: '总线索量', value: '1,234', icon: 'Connection', color: '#409EFF' },
  { label: '到店量', value: '456', icon: 'Location', color: '#67C23A' },
  { label: '成交量', value: '123', icon: 'ShoppingCart', color: '#E6A23C' },
  { label: '成交率', value: '27%', icon: 'TrendCharts', color: '#F56C6C' }
]

const latestLeads = [
  { source: '抖音', phone: '138****1234', wechat: 'wx123456', location: '北京市朝阳区', time: '2024-03-20 14:30' },
  { source: '视频号', phone: '139****5678', wechat: 'wx234567', location: '上海市浦东新区', time: '2024-03-20 15:20' },
  { source: '快手', phone: '137****9012', wechat: 'wx345678', location: '广州市天河区', time: '2024-03-20 16:10' },
  { source: '小红书', phone: '136****3456', wechat: 'wx456789', location: '深圳市南山区', time: '2024-03-20 17:00' }
]

const salesRanking = [
  { name: '张三', leads: 156, visit: 45, deal: 12, rate: '26.7%' },
  { name: '李四', leads: 142, visit: 38, deal: 10, rate: '26.3%' },
  { name: '王五', leads: 128, visit: 35, deal: 9, rate: '25.7%' },
  { name: '赵六', leads: 115, visit: 32, deal: 8, rate: '25.0%' }
]

// 模拟数据
const pendingLeads = ref([
  {
    id: 1,
    source: '抖音',
    account: 'douyin123',
    phone: '138****1234',
    type: '租车',
    createTime: '2024-03-20 14:30:00'
  },
  {
    id: 2,
    source: '视频号',
    account: 'video456',
    phone: '139****5678',
    type: '买车',
    createTime: '2024-03-20 15:20:00'
  },
  // 添加更多数据...
])

const followCustomers = ref([
  {
    id: 1,
    nickname: '客户A',
    phone: '138****1234',
    type: '二手车',
    sales: '张三',
    lastContact: '2024-03-20 14:30:00'
  },
  {
    id: 2,
    nickname: '客户B',
    phone: '139****5678',
    type: '租车',
    sales: '李四',
    lastContact: '2024-03-20 15:20:00'
  },
  // 添加更多数据...
])

const auditOrders = ref([
  {
    id: 1,
    orderNo: 'DD202403200001',
    customer: '客户A',
    amount: '50000',
    type: '租车',
    createTime: '2024-03-20 14:30:00'
  },
  {
    id: 2,
    orderNo: 'DD202403200002',
    customer: '客户B',
    amount: '80000',
    type: '买车',
    createTime: '2024-03-20 15:20:00'
  },
  // 添加更多数据...
])

onMounted(() => {
  // 初始化销售趋势图表
  const chart = echarts.init(chartRef.value)
  chart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'line',
      smooth: true
    }]
  })

  // 初始化线索来源分布图表
  const pieChart = echarts.init(pieChartRef.value)
  pieChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [{
      type: 'pie',
      radius: '50%',
      data: [
        { value: 335, name: '抖音' },
        { value: 310, name: '视频号' },
        { value: 234, name: '快手' },
        { value: 135, name: '直播' },
        { value: 154, name: '小红书' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  })
})

const handleMore = () => {
  moreDialogVisible.value = true
}

const handleDistribute = (row) => {
  // 实现分发逻辑
  ElMessage.success('分发成功')
}

const handleFollow = (row) => {
  // 实现跟进逻辑
  ElMessage.success('跟进成功')
}

const handleAudit = (row) => {
  // 实现审核逻辑
  ElMessage.success('审核成功')
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.stat-card {
  margin-bottom: 20px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon .el-icon {
  font-size: 24px;
  color: #fff;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mt-4 {
  margin-top: 20px;
}

.more-dialog {
  max-height: 80vh;
  overflow-y: auto;
}

.more-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.more-dialog :deep(.el-tabs__content) {
  padding: 20px;
}
</style> 